<template>
<div class="activeList">
   <ul class="header__tab">
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all0'}" @click="setSearchType('all0')">全部</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all1'}" @click="setSearchType('all1')">未付款</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all2'}" @click="setSearchType('all2')">已付款</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all3'}" @click="setSearchType('all3')">已送达</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all4'}" @click="setSearchType('all4')">已发货</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all5'}" @click="setSearchType('all5')">退换</li>
    </ul>
    <div class="main-body">
      <div class="search-box">
        <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="活动名称">
          <el-input v-model="searchData.name" placeholder="请输入活动名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >搜索</el-button>
        </el-form-item>
      </el-form>
      </div>
      <div>
      <el-table header-row-class-name="Active__table__header" row-class-name="Active__table__row" :data="tableData">
            <el-table-column fixed  label="状态" width="150" border="none;" align="center" >
                <template slot-scope="scope">
                      <span v-bind:class="{datecolor: (scope.row.date === '即将开始'||'进行中'||'待定'||'已结束')}">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column label="满赠活动" width="120"  border="none;" align="center">
                <template slot-scope="scope">
                      <p>{{ scope.row.name[0]}}</p>
                      <p v-bind:class="{huancolor: (scope.row.name[1] === '换购活动'),mancolor: (scope.row.name[1] === '满赠活动')}">{{ scope.row.name[1]}}</p>
                      <p>{{ scope.row.name[2]}}</p>
                </template>
            </el-table-column>
            <el-table-column label="开始时间"  border="none" align="center">
                <template slot-scope="scope">
                      <p>{{ scope.row.province[0]}}</p>
                      <p>{{ scope.row.province[1]}}</p>
                </template>
            </el-table-column>
            <el-table-column label="结束时间"  border="none" align="center">
                <template slot-scope="scope">
                      <p>{{ scope.row.city[0]}}</p>
                      <p>{{ scope.row.city[1]}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="活动段数降序" width="120"  border="none" align="center">
            </el-table-column>
            <el-table-column prop="zip" label="商品数量" width="120" b rder="none" align="center">

            </el-table-column>
            <el-table-column prop="zet" label="参与次数" width="120" b rder="none" align="center">

            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120" border="none"  align="center">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" border="none" align="center">开始/暂停</el-button><br/>
                <nuxt-link style="color:#409EFF;" to="/active/addActive/0123">编辑</nuxt-link><br/>
                <el-button type="text" align="center">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:0px;text-align: center;background-color:#fff;">
            <el-pagination layout="prev, pager, next" :total="50">
            </el-pagination>
      </div>
      </div>
    </div>
</div>
  
</template>
<script>
export default {
  data(){
    return{
      search: {type: 'all0'},
      searchData:{name:''},
             tableData: [{
          date: '即将开始',
          name: ['山田studio','换购活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip: '12件',
          zet:'105'
        }, {
          date: '进行中',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip:'12件',
          zet:'105'
        }, {
          date: '待定',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip: '12件',
          zet:'105'
        }, {
          date: '已结束',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address:"4段",
          zip: '12件',
          zet:'105'
        }]
    }
  },
  methods:{
        setSearchType (type) {
        this.search.type = type
      },
      onSubmit(){
        console.log('提交')
      }
  } 
}
</script>
<style lang="scss" scoped>
    .main-body{
    .datecolor{color: #409EFF;}
    .huancolor{color:#6dc361;}
    .mancolor{ color:#f95c79;}
     padding:20px  20px ;
     & /deep/{
       .el-input__inner {
         border-radius:20px;
         width:180px;
         height:25px;
         background-color: #f0f5fb;
       }
     }
     .search-box{
       background-color: #Fff;
       padding:10px 20px;
       padding-bottom: 0px;
       border-bottom: 1px  solid  #bdbdbd;
       .el-button--primary{
         margin-left: 620px;
         outline: none;
       }
     }
   }
</style>
